<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电学计算器 | 电压、电流、电阻、功率计算</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#6B7280',
                        accent: '#36CBCB',
                        danger: '#F56C6C',
                        warning: '#F59E0B',
                        success: '#10B981',
                        dark: {
                            100: '#F9FAFB',
                            200: '#F3F4F6',
                            300: '#E5E7EB',
                            400: '#D1D5DB',
                            500: '#9CA3AF',
                            600: '#6B7280',
                            700: '#4B5563',
                            800: '#374151',
                            900: '#1F2937',
                            950: '#111827'
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                    boxShadow: {
                        'glow': '0 0 15px rgba(22, 93, 255, 0.3)',
                        'glow-lg': '0 0 25px rgba(22, 93, 255, 0.4)',
                    }
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            .text-shadow-lg {
                text-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
            }
            .transition-all-300 {
                transition: all 0.3s ease;
            }
            .bg-gradient-blue {
                background: linear-gradient(135deg, #165DFF 0%, #36CBCB 100%);
            }
            .card-hover {
                @apply hover:shadow-xl hover:-translate-y-1 transition-all duration-300;
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary;
            }
            .animate-float {
                animation: float 6s ease-in-out infinite;
            }
            @keyframes float {
                0% { transform: translateY(0px); }
                50% { transform: translateY(-10px); }
                100% { transform: translateY(0px); }
            }
            .animate-pulse-slow {
                animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
            .formula-container {
                @apply bg-gray-100 dark:bg-dark-800 rounded-lg p-4 my-4;
            }
            .formula {
                @apply text-lg font-mono font-semibold text-primary dark:text-accent;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 dark:bg-dark-900 text-gray-800 dark:text-gray-100 min-h-screen transition-colors duration-300">
    <!-- 顶部导航 -->
    <nav class="fixed w-full bg-white/80 dark:bg-dark-900/80 backdrop-blur-md shadow-sm z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-bolt text-primary text-2xl"></i>
                <h1 class="text-xl font-bold bg-gradient-blue bg-clip-text text-transparent">电学计算器</h1>
            </div>
            
            <div class="flex items-center space-x-4">
                <!-- 深色/浅色模式切换 -->
                <button id="themeToggle" class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-dark-800 transition-colors">
                    <i class="fa fa-moon-o dark:hidden text-gray-600"></i>
                    <i class="fa fa-sun-o hidden dark:block text-yellow-400"></i>
                </button>
                
                <!-- 帮助按钮 -->
                <button id="helpBtn" class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-dark-800 transition-colors">
                    <i class="fa fa-question-circle text-primary"></i>
                </button>
            </div>
        </div>
    </nav>
    
    <!-- 主内容区 -->
    <main class="container mx-auto px-4 pt-24 pb-16 max-w-6xl">
        <!-- 英雄区域 -->
        <section class="mb-12 text-center">
            <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4 text-shadow-lg">
                电压、电流、电阻、电功率<br>
                <span class="bg-gradient-blue bg-clip-text text-transparent">相互计算工具</span>
            </h2>
            <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mb-8">
                快速计算电学基本参数，深入理解欧姆定律和功率公式的应用。输入任意两个参数，自动计算其他两个参数。
            </p>
            
            <div class="flex justify-center space-x-2 mb-8">
                <span class="text-lg font-bold text-primary">V</span>
                <span class="text-lg">=</span>
                <span class="text-lg font-bold text-warning">I</span>
                <span class="text-lg">×</span>
                <span class="text-lg font-bold text-success">R</span>
                <span class="text-lg">, </span>
                <span class="text-lg font-bold text-accent">P</span>
                <span class="text-lg">=</span>
                <span class="text-lg font-bold text-primary">V</span>
                <span class="text-lg">×</span>
                <span class="text-lg font-bold text-warning">I</span>
            </div>
            
            <div class="flex flex-wrap justify-center gap-4 mb-8">
                <div class="bg-white dark:bg-dark-800 rounded-xl p-4 shadow-md card-hover">
                    <div class="text-primary text-3xl mb-2">
                        <i class="fa fa-bolt"></i>
                    </div>
                    <h3 class="font-bold">电压 (V)</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">伏特</p>
                </div>
                
                <div class="bg-white dark:bg-dark-800 rounded-xl p-4 shadow-md card-hover">
                    <div class="text-warning text-3xl mb-2">
                        <i class="fa fa-area-chart"></i>
                    </div>
                    <h3 class="font-bold">电流 (I)</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">安培</p>
                </div>
                
                <div class="bg-white dark:bg-dark-800 rounded-xl p-4 shadow-md card-hover">
                    <div class="text-success text-3xl mb-2">
                        <i class="fa fa-random"></i>
                    </div>
                    <h3 class="font-bold">电阻 (R)</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">欧姆</p>
                </div>
                
                <div class="bg-white dark:bg-dark-800 rounded-xl p-4 shadow-md card-hover">
                    <div class="text-accent text-3xl mb-2">
                        <i class="fa fa-fire"></i>
                    </div>
                    <h3 class="font-bold">功率 (P)</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">瓦特</p>
                </div>
            </div>
        </section>
        
        <!-- 计算器区域 -->
        <section class="bg-white dark:bg-dark-800 rounded-2xl shadow-xl p-6 md:p-10 mb-12">
            <h3 class="text-xl font-bold mb-6 text-center">电学参数计算器</h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- 输入区域 -->
                <div>
                    <h4 class="font-medium mb-4">输入已知参数</h4>
                    
                    <div class="space-y-4">
                        <!-- 电压输入 -->
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <span class="text-gray-500 dark:text-gray-400">V</span>
                            </div>
                            <input type="number" id="voltage" placeholder="电压 (V)" 
                                   class="pl-8 w-full rounded-lg border-gray-300 dark:border-dark-700 bg-gray-50 dark:bg-dark-700 shadow-sm input-focus p-3">
                        </div>
                        
                        <!-- 电流输入 -->
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <span class="text-gray-500 dark:text-gray-400">I</span>
                            </div>
                            <input type="number" id="current" placeholder="电流 (A)" 
                                   class="pl-8 w-full rounded-lg border-gray-300 dark:border-dark-700 bg-gray-50 dark:bg-dark-700 shadow-sm input-focus p-3">
                        </div>
                        
                        <!-- 电阻输入 -->
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <span class="text-gray-500 dark:text-gray-400">R</span>
                            </div>
                            <input type="number" id="resistance" placeholder="电阻 (Ω)" 
                                   class="pl-8 w-full rounded-lg border-gray-300 dark:border-dark-700 bg-gray-50 dark:bg-dark-700 shadow-sm input-focus p-3">
                        </div>
                        
                        <!-- 功率输入 -->
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <span class="text-gray-500 dark:text-gray-400">P</span>
                            </div>
                            <input type="number" id="power" placeholder="功率 (W)" 
                                   class="pl-8 w-full rounded-lg border-gray-300 dark:border-dark-700 bg-gray-50 dark:bg-dark-700 shadow-sm input-focus p-3">
                        </div>
                        
                        <div class="flex justify-center mt-4">
                            <button id="calculateBtn" class="bg-primary hover:bg-primary/90 text-white rounded-xl py-3 px-8 transition-all duration-300 shadow-lg hover:shadow-glow flex items-center">
                                <i class="fa fa-calculator mr-2"></i> 计算
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 结果区域 -->
                <div>
                    <h4 class="font-medium mb-4">计算结果</h4>
                    
                    <div id="resultContainer" class="bg-gray-50 dark:bg-dark-700 rounded-xl p-6 h-full flex flex-col justify-between">
                        <!-- 结果将动态生成 -->
                        <div class="space-y-4">
                            <div id="voltageResult" class="bg-white dark:bg-dark-800 rounded-lg p-4 shadow-sm">
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-600 dark:text-gray-300">电压 (V):</span>
                                    <span class="text-lg font-bold text-primary">--</span>
                                </div>
                            </div>
                            
                            <div id="currentResult" class="bg-white dark:bg-dark-800 rounded-lg p-4 shadow-sm">
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-600 dark:text-gray-300">电流 (I):</span>
                                    <span class="text-lg font-bold text-warning">--</span>
                                </div>
                            </div>
                            
                            <div id="resistanceResult" class="bg-white dark:bg-dark-800 rounded-lg p-4 shadow-sm">
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-600 dark:text-gray-300">电阻 (R):</span>
                                    <span class="text-lg font-bold text-success">--</span>
                                </div>
                            </div>
                            
                            <div id="powerResult" class="bg-white dark:bg-dark-800 rounded-lg p-4 shadow-sm">
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-600 dark:text-gray-300">功率 (P):</span>
                                    <span class="text-lg font-bold text-accent">--</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-6 pt-6 border-t border-gray-200 dark:border-dark-600">
                            <h5 class="font-medium mb-2">使用的公式:</h5>
                            <div id="formulaUsed" class="text-sm text-gray-600 dark:text-gray-300">
                                请输入至少两个参数进行计算
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 关系可视化区域 -->
        <section class="bg-white dark:bg-dark-800 rounded-2xl shadow-xl p-6 md:p-10 mb-12">
            <h3 class="text-xl font-bold mb-6 text-center">参数关系可视化</h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- 电压-电流关系 -->
                <div>
                    <h4 class="font-medium mb-4">电压-电流关系</h4>
                    <div class="bg-gray-50 dark:bg-dark-700 rounded-xl p-4 h-80">
                        <canvas id="voltageCurrentChart"></canvas>
                    </div>
                </div>
                
                <!-- 功率-电流关系 -->
                <div>
                    <h4 class="font-medium mb-4">功率-电流关系</h4>
                    <div class="bg-gray-50 dark:bg-dark-700 rounded-xl p-4 h-80">
                        <canvas id="powerCurrentChart"></canvas>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 公式和说明区域 -->
        <section class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
            <!-- 欧姆定律 -->
            <div class="bg-white dark:bg-dark-800 rounded-2xl shadow-xl p-6 md:p-8">
                <h3 class="text-xl font-bold mb-4 flex items-center">
                    <i class="fa fa-lightbulb-o text-primary mr-2"></i> 欧姆定律
                </h3>
                
                <div class="formula-container">
                    <div class="formula mb-2">V = I × R</div>
                    <p class="text-sm text-gray-600 dark:text-gray-300">
                        电压等于电流乘以电阻。这是电学中最基本的公式之一。
                    </p>
                </div>
                
                <div class="space-y-4">
                    <div class="formula-container">
                        <div class="formula mb-2">I = V / R</div>
                        <p class="text-sm text-gray-600 dark:text-gray-300">
                            电流等于电压除以电阻。电流与电压成正比，与电阻成反比。
                        </p>
                    </div>
                    
                    <div class="formula-container">
                        <div class="formula mb-2">R = V / I</div>
                        <p class="text-sm text-gray-600 dark:text-gray-300">
                            电阻等于电压除以电流。电阻是导体对电流阻碍作用的度量。
                        </p>
                    </div>
                </div>
            </div>
            
            <!-- 功率公式 -->
            <div class="bg-white dark:bg-dark-800 rounded-2xl shadow-xl p-6 md:p-8">
                <h3 class="text-xl font-bold mb-4 flex items-center">
                    <i class="fa fa-fire text-accent mr-2"></i> 功率公式
                </h3>
                
                <div class="formula-container">
                    <div class="formula mb-2">P = V × I</div>
                    <p class="text-sm text-gray-600 dark:text-gray-300">
                        功率等于电压乘以电流。功率表示单位时间内消耗的电能。
                    </p>
                </div>
                
                <div class="space-y-4">
                    <div class="formula-container">
                        <div class="formula mb-2">P = I² × R</div>
                        <p class="text-sm text-gray-600 dark:text-gray-300">
                            功率等于电流的平方乘以电阻。这个公式常用于计算电阻产生的热量。
                        </p>
                    </div>
                    
                    <div class="formula-container">
                        <div class="formula mb-2">P = V² / R</div>
                        <p class="text-sm text-gray-600 dark:text-gray-300">
                            功率等于电压的平方除以电阻。这个公式在已知电压和电阻时很有用。
                        </p>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 使用指南 -->
        <section class="bg-white dark:bg-dark-800 rounded-2xl shadow-xl p-6 md:p-10 mb-12">
            <h3 class="text-xl font-bold mb-6 text-center">使用指南</h3>
            
            <div class="space-y-6">
                <div class="flex flex-col md:flex-row items-start gap-4">
                    <div class="bg-primary/10 dark:bg-primary/20 text-primary p-3 rounded-lg flex-shrink-0">
                        <i class="fa fa-check-circle text-xl"></i>
                    </div>
                    <div>
                        <h4 class="font-medium text-lg mb-2">输入已知参数</h4>
                        <p class="text-gray-600 dark:text-gray-300">
                            在左侧输入区域，输入您已知的电学参数（至少两个）。未输入的参数将被计算。
                        </p>
                    </div>
                </div>
                
                <div class="flex flex-col md:flex-row items-start gap-4">
                    <div class="bg-primary/10 dark:bg-primary/20 text-primary p-3 rounded-lg flex-shrink-0">
                        <i class="fa fa-calculator text-xl"></i>
                    </div>
                    <div>
                        <h4 class="font-medium text-lg mb-2">点击计算按钮</h4>
                        <p class="text-gray-600 dark:text-gray-300">
                            输入完成后，点击"计算"按钮，右侧结果区域将显示所有参数的计算结果。
                        </p>
                    </div>
                </div>
                
                <div class="flex flex-col md:flex-row items-start gap-4">
                    <div class="bg-primary/10 dark:bg-primary/20 text-primary p-3 rounded-lg flex-shrink-0">
                        <i class="fa fa-area-chart text-xl"></i>
                    </div>
                    <div>
                        <h4 class="font-medium text-lg mb-2">查看关系图表</h4>
                        <p class="text-gray-600 dark:text-gray-300">
                            在参数关系可视化区域，您可以看到电压-电流和功率-电流的关系图表，帮助理解参数间的变化规律。
                        </p>
                    </div>
                </div>
                
                <div class="flex flex-col md:flex-row items-start gap-4">
                    <div class="bg-primary/10 dark:bg-primary/20 text-primary p-3 rounded-lg flex-shrink-0">
                        <i class="fa fa-book text-xl"></i>
                    </div>
                    <div>
                        <h4 class="font-medium text-lg mb-2">参考公式说明</h4>
                        <p class="text-gray-600 dark:text-gray-300">
                            在公式和说明区域，您可以查看欧姆定律和功率公式的详细解释和变形公式。
                        </p>
                    </div>
                </div>
            </div>
        </section>
    </main>
    
    <!-- 页脚 -->
    <footer class="bg-white dark:bg-dark-800 py-8">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <div class="flex items-center">
                        <i class="fa fa-bolt text-primary text-xl mr-2"></i>
                        <h2 class="text-lg font-bold">电学计算器</h2>
                    </div>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                        一个简单实用的电学参数计算工具
                    </p>
                </div>
                
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-accent transition-colors">
                        <i class="fa fa-question-circle"></i> 帮助
                    </a>
                    <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-accent transition-colors">
                        <i class="fa fa-envelope"></i> 联系我们
                    </a>
                    <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-accent transition-colors">
                        <i class="fa fa-github"></i> GitHub
                    </a>
                </div>
            </div>
            
            <div class="mt-6 pt-6 border-t border-gray-200 dark:border-dark-700 text-center text-sm text-gray-500 dark:text-gray-400">
                <p>© 2023 电学计算器 | 保留所有权利</p>
            </div>
        </div>
    </footer>
    
    <!-- 帮助模态框 -->
    <div id="helpModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white dark:bg-dark-800 rounded-2xl shadow-2xl p-6 max-w-md w-full mx-4 animate-scale">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-xl font-bold text-primary">使用帮助</h3>
                <button id="closeHelpBtn" class="text-gray-400 hover:text-gray-600">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
            
            <div class="space-y-4 text-gray-700 dark:text-gray-200">
                <div>
                    <h4 class="font-medium mb-2">如何使用电学计算器</h4>
                    <p class="text-sm">
                        本计算器基于欧姆定律（V = I × R）和功率公式（P = V × I），可以根据已知的两个参数计算出另外两个参数。
                    </p>
                </div>
                
                <div>
                    <h4 class="font-medium mb-2">输入规则</h4>
                    <ul class="list-disc pl-5 space-y-1 text-sm">
                        <li>请至少输入两个参数进行计算</li>
                        <li>输入的参数必须为正数</li>
                        <li>不支持单位输入，默认使用国际单位制</li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="font-medium mb-2">参数说明</h4>
                    <ul class="list-disc pl-5 space-y-1 text-sm">
                        <li>电压 (V): 伏特 (V)</li>
                        <li>电流 (I): 安培 (A)</li>
                        <li>电阻 (R): 欧姆 (Ω)</li>
                        <li>功率 (P): 瓦特 (W)</li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="font-medium mb-2">公式参考</h4>
                    <div class="space-y-2 text-sm">
                        <p>欧姆定律: V = I × R</p>
                        <p>功率公式: P = V × I</p>
                        <p>变形公式: P = I² × R = V² / R</p>
                    </div>
                </div>
            </div>
            
            <div class="mt-6">
                <button id="gotItBtn" class="w-full bg-primary hover:bg-primary/90 text-white rounded-xl py-2 px-4 transition-all duration-300">
                    明白了
                </button>
            </div>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // DOM元素
            const voltageInput = document.getElementById('voltage');
            const currentInput = document.getElementById('current');
            const resistanceInput = document.getElementById('resistance');
            const powerInput = document.getElementById('power');
            const calculateBtn = document.getElementById('calculateBtn');
            
            const voltageResult = document.getElementById('voltageResult').querySelector('span:last-child');
            const currentResult = document.getElementById('currentResult').querySelector('span:last-child');
            const resistanceResult = document.getElementById('resistanceResult').querySelector('span:last-child');
            const powerResult = document.getElementById('powerResult').querySelector('span:last-child');
            
            const formulaUsed = document.getElementById('formulaUsed');
            
            const helpBtn = document.getElementById('helpBtn');
            const helpModal = document.getElementById('helpModal');
            const closeHelpBtn = document.getElementById('closeHelpBtn');
            const gotItBtn = document.getElementById('gotItBtn');
            
            const themeToggle = document.getElementById('themeToggle');
            
            // 图表
            let voltageCurrentChart = null;
            let powerCurrentChart = null;
            
            // 初始化
            initializeCharts();
            
            // 事件监听
            calculateBtn.addEventListener('click', calculateValues);
            helpBtn.addEventListener('click', showHelpModal);
            closeHelpBtn.addEventListener('click', hideHelpModal);
            gotItBtn.addEventListener('click', hideHelpModal);
            themeToggle.addEventListener('click', toggleTheme);
            
            // 为输入框添加输入事件，实时计算
            [voltageInput, currentInput, resistanceInput, powerInput].forEach(input => {
                input.addEventListener('input', function() {
                    // 实时计算，只有当有两个输入框有值时
                    const nonEmptyInputs = [voltageInput, currentInput, resistanceInput, powerInput]
                        .filter(input => input.value !== '');
                    
                    if (nonEmptyInputs.length >= 2) {
                        calculateValues();
                    }
                });
            });
            
            // 初始化图表
            function initializeCharts() {
                // 电压-电流关系图表
                const vCtx = document.getElementById('voltageCurrentChart').getContext('2d');
                voltageCurrentChart = new Chart(vCtx, {
                    type: 'line',
                    data: {
                        labels: [0, 1, 2, 3, 4, 5],
                        datasets: [{
                            label: '电压 (V = 5Ω × I)',
                            data: [0, 5, 10, 15, 20, 25],
                            borderColor: '#165DFF',
                            backgroundColor: 'rgba(22, 93, 255, 0.1)',
                            fill: true,
                            tension: 0.4
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            x: {
                                title: {
                                    display: true,
                                    text: '电流 (A)',
                                    color: getComputedStyle(document.documentElement).getPropertyValue('--tw-text-opacity') ?
                                        `rgba(107, 114, 128, var(--tw-text-opacity))` : '#6B7280'
                                },
                                grid: {
                                    color: getComputedStyle(document.documentElement).getPropertyValue('--tw-bg-opacity') ?
                                        `rgba(229, 231, 235, var(--tw-bg-opacity))` : '#E5E7EB'
                                }
                            },
                            y: {
                                title: {
                                    display: true,
                                    text: '电压 (V)',
                                    color: getComputedStyle(document.documentElement).getPropertyValue('--tw-text-opacity') ?
                                        `rgba(107, 114, 128, var(--tw-text-opacity))` : '#6B7280'
                                },
                                grid: {
                                    color: getComputedStyle(document.documentElement).getPropertyValue('--tw-bg-opacity') ?
                                        `rgba(229, 231, 235, var(--tw-bg-opacity))` : '#E5E7EB'
                                }
                            }
                        },
                        plugins: {
                            legend: {
                                display: false
                            },
                            tooltip: {
                                mode: 'index',
                                intersect: false,
                                backgroundColor: 'rgba(255, 255, 255, 0.9)',
                                titleColor: '#1F2937',
                                bodyColor: '#1F2937',
                                borderColor: 'rgba(22, 93, 255, 0.2)',
                                borderWidth: 1,
                                padding: 10,
                                boxPadding: 5,
                                usePointStyle: true
                            }
                        }
                    }
                });
                
                // 功率-电流关系图表
                const pCtx = document.getElementById('powerCurrentChart').getContext('2d');
                powerCurrentChart = new Chart(pCtx, {
                    type: 'line',
                    data: {
                        labels: [0, 1, 2, 3, 4, 5],
                        datasets: [{
                            label: '功率 (P = 5Ω × I²)',
                            data: [0, 5, 20, 45, 80, 125],
                            borderColor: '#36CBCB',
                            backgroundColor: 'rgba(54, 203, 203, 0.1)',
                            fill: true,
                            tension: 0.4
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            x: {
                                title: {
                                    display: true,
                                    text: '电流 (A)',
                                    color: getComputedStyle(document.documentElement).getPropertyValue('--tw-text-opacity') ?
                                        `rgba(107, 114, 128, var(--tw-text-opacity))` : '#6B7280'
                                },
                                grid: {
                                    color: getComputedStyle(document.documentElement).getPropertyValue('--tw-bg-opacity') ?
                                        `rgba(229, 231, 235, var(--tw-bg-opacity))` : '#E5E7EB'
                                }
                            },
                            y: {
                                title: {
                                    display: true,
                                    text: '功率 (W)',
                                    color: getComputedStyle(document.documentElement).getPropertyValue('--tw-text-opacity') ?
                                        `rgba(107, 114, 128, var(--tw-text-opacity))` : '#6B7280'
                                },
                                grid: {
                                    color: getComputedStyle(document.documentElement).getPropertyValue('--tw-bg-opacity') ?
                                        `rgba(229, 231, 235, var(--tw-bg-opacity))` : '#E5E7EB'
                                }
                            }
                        },
                        plugins: {
                            legend: {
                                display: false
                            },
                            tooltip: {
                                mode: 'index',
                                intersect: false,
                                backgroundColor: 'rgba(255, 255, 255, 0.9)',
                                titleColor: '#1F2937',
                                bodyColor: '#1F2937',
                                borderColor: 'rgba(54, 203, 203, 0.2)',
                                borderWidth: 1,
                                padding: 10,
                                boxPadding: 5,
                                usePointStyle: true
                            }
                        }
                    }
                });
            }
            
            // 计算电学参数
            function calculateValues() {
                // 获取输入值
                const v = parseFloat(voltageInput.value) || null;
                const i = parseFloat(currentInput.value) || null;
                const r = parseFloat(resistanceInput.value) || null;
                const p = parseFloat(powerInput.value) || null;
                
                // 检查是否有足够的输入值
                const nonNullInputs = [v, i, r, p].filter(val => val !== null);
                if (nonNullInputs.length < 2) {
                    showError("请至少输入两个参数");
                    return;
                }
                
                // 清除错误
                hideError();
                
                // 根据输入的参数计算其他参数
                let calculatedV = v;
                let calculatedI = i;
                let calculatedR = r;
                let calculatedP = p;
                
                let formulaUsedText = "使用的公式: ";
                
                // 计算逻辑
                if (v !== null && i !== null) {
                    // V和I已知
                    calculatedR = v / i;
                    calculatedP = v * i;
                    formulaUsedText += "R = V / I, P = V × I";
                } else if (v !== null && r !== null) {
                    // V和R已知
                    calculatedI = v / r;
                    calculatedP = v * v / r;
                    formulaUsedText += "I = V / R, P = V² / R";
                } else if (v !== null && p !== null) {
                    // V和P已知
                    calculatedI = p / v;
                    calculatedR = v * v / p;
                    formulaUsedText += "I = P / V, R = V² / P";
                } else if (i !== null && r !== null) {
                    // I和R已知
                    calculatedV = i * r;
                    calculatedP = i * i * r;
                    formulaUsedText += "V = I × R, P = I² × R";
                } else if (i !== null && p !== null) {
                    // I和P已知
                    calculatedV = p / i;
                    calculatedR = p / (i * i);
                    formulaUsedText += "V = P / I, R = P / I²";
                } else if (r !== null && p !== null) {
                    // R和P已知
                    calculatedI = Math.sqrt(p / r);
                    calculatedV = Math.sqrt(p * r);
                    formulaUsedText += "I = √(P / R), V = √(P × R)";
                }
                
                // 显示结果
                voltageResult.textContent = calculatedV.toFixed(4) + " V";
                currentResult.textContent = calculatedI.toFixed(4) + " A";
                resistanceResult.textContent = calculatedR.toFixed(4) + " Ω";
                powerResult.textContent = calculatedP.toFixed(4) + " W";
                
                // 更新公式文本
                formulaUsed.textContent = formulaUsedText;
                
                // 更新图表
                updateCharts(calculatedR);
                
                // 添加结果动画
                addResultAnimation();
            }
            
            // 更新图表
            function updateCharts(resistance) {
                // 生成新的数据点
                const xValues = [0, 1, 2, 3, 4, 5];
                const vValues = xValues.map(i => i * resistance);
                const pValues = xValues.map(i => i * i * resistance);
                
                // 更新电压-电流图表
                voltageCurrentChart.data.datasets[0].data = vValues;
                voltageCurrentChart.data.datasets[0].label = `电压 (V = ${resistance}Ω × I)`;
                voltageCurrentChart.update();
                
                // 更新功率-电流图表
                powerCurrentChart.data.datasets[0].data = pValues;
                powerCurrentChart.data.datasets[0].label = `功率 (P = ${resistance}Ω × I²)`;
                powerCurrentChart.update();
            }
            
            // 显示帮助模态框
            function showHelpModal() {
                helpModal.classList.remove('hidden');
                // 添加动画
                const modalContent = helpModal.querySelector('div');
                modalContent.classList.add('animate-scale');
            }
            
            // 隐藏帮助模态框
            function hideHelpModal() {
                helpModal.classList.add('hidden');
            }
            
            // 切换深色/浅色模式
            function toggleTheme() {
                document.documentElement.classList.toggle('dark');
                
                // 更新图表颜色
                if (voltageCurrentChart) {
                    updateChartColors();
                }
            }
            
            // 更新图表颜色以匹配当前主题
            function updateChartColors() {
                const isDark = document.documentElement.classList.contains('dark');
                const textColor = isDark ? '#F3F4F6' : '#6B7280';
                const gridColor = isDark ? 'rgba(75, 85, 99, 0.2)' : 'rgba(229, 231, 235, 0.7)';
                const backgroundColor = isDark ? 'rgba(31, 41, 55, 0.9)' : 'rgba(255, 255, 255, 0.9)';
                
                // 更新电压-电流图表
                voltageCurrentChart.options.scales.x.title.color = textColor;
                voltageCurrentChart.options.scales.y.title.color = textColor;
                voltageCurrentChart.options.scales.x.grid.color = gridColor;
                voltageCurrentChart.options.scales.y.grid.color = gridColor;
                voltageCurrentChart.options.plugins.tooltip.backgroundColor = backgroundColor;
                
                // 更新功率-电流图表
                powerCurrentChart.options.scales.x.title.color = textColor;
                powerCurrentChart.options.scales.y.title.color = textColor;
                powerCurrentChart.options.scales.x.grid.color = gridColor;
                powerCurrentChart.options.scales.y.grid.color = gridColor;
                powerCurrentChart.options.plugins.tooltip.backgroundColor = backgroundColor;
                
                // 更新图表
                voltageCurrentChart.update();
                powerCurrentChart.update();
            }
            
            // 显示错误
            function showError(message) {
                const errorElement = document.createElement('div');
                errorElement.className = 'bg-danger/10 border border-danger text-danger px-4 py-3 rounded-lg mt-4 animate-fade-in';
                errorElement.innerHTML = `<i class="fa fa-exclamation-circle mr-2"></i> ${message}`;
                
                // 如果已经有错误消息，先移除
                const existingError = document.querySelector('.bg-danger/10');
                if (existingError) {
                    existingError.remove();
                }
                
                // 添加错误消息
                document.getElementById('resultContainer').appendChild(errorElement);
            }
            
            // 隐藏错误
            function hideError() {
                const errorElement = document.querySelector('.bg-danger/10');
                if (errorElement) {
                    errorElement.remove();
                }
            }
            
            // 添加结果动画
            function addResultAnimation() {
                const resultElements = [voltageResult, currentResult, resistanceResult, powerResult];
                
                resultElements.forEach((element, index) => {
                    // 重置动画
                    element.classList.remove('animate-pulse');
                    void element.offsetWidth; // 触发重排
                    element.classList.add('animate-pulse');
                    
                    // 一段时间后移除动画
                    setTimeout(() => {
                        element.classList.remove('animate-pulse');
                    }, 1500);
                });
            }
            
            // 检查用户的首选颜色方案
            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                document.documentElement.classList.add('dark');
            }
        });
    </script>
</body>
</html>